<template>
  <el-container class="water-monitor-layout" fullscreen>
    <!-- 左侧区域-水表树形结构 -->
    <el-aside width="280px" class="aside-panel">
      <div class="aside-header">
        <el-icon class="header-icon"><LocationFilled /></el-icon>
        <span class="header-title">每日用水量</span>
      </div>
      <!-- 区域-水表树形组件 -->
      <el-tree
          ref="areaMeterTree"
          :data="treeData"
          :props="treeProps"
          :expand-on-click-node="true"
          :filter-node-method="filterTreeNode"
          @node-click="handleNodeSelect"
          class="tree-container"
          v-loading="treeLoading"
          loading-text="加载区域与水表数据中..."
      >
        <!-- 自定义节点图标（区分区域/水表） -->
        <template #default="{ node }">
          <div class="node-content">
            <!-- 区域节点图标 -->
            <el-icon v-if="node.type === 'area'" class="node-icon area-icon">
              <OfficeBuilding />
            </el-icon>
            <!-- 水表节点图标 -->
            <el-icon v-else-if="node.type === 'meter'" class="node-icon meter-icon">
              <WaterFilled />
            </el-icon>
            <span class="node-label">{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </el-aside>

    <!-- 右侧主内容区（时间筛选 + 图表/表格） -->
    <el-main class="main-content">
      <!-- 时间筛选栏 -->
      <div class="time-filter-bar">
        <!-- 起止时间选择器 - 改为日期选择器 -->
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
            class="date-picker"
        />
        <!-- 快捷时间按钮组 -->
        <el-button-group class="quick-time-group">
          <el-button size="small" type="primary" @click="setQuickTime('today')">今日</el-button>
          <el-button size="small" type="primary" @click="setQuickTime('yesterday')">昨天</el-button>
          <el-button size="small" type="primary" @click="setQuickTime('week')">本周</el-button>
          <el-button size="small" type="primary" @click="setQuickTime('month')">当月</el-button>
          <el-button size="small" type="primary" @click="setQuickTime('lastMonth')">上月</el-button>
        </el-button-group>

        <!-- 新增：导出图表按钮 -->
        <el-button
            size="small"
            type="primary"
            icon="Download"
            @click="handleExportChart"
            class="export-btn"
        >
          导出图表
        </el-button>
        <!-- 基准线控制 -->
        <div class="dayUsage-line-control">
          <el-switch
              v-model="showdayUsageLine"
              active-text="显示基准线"
              inactive-text="隐藏基准线"
              class="dayUsage-switch"
          />
          <!-- 无基准值时提示 -->
          <span class="dayUsage-tip" v-if="!dayUsage">（当前水表无基准用量）</span>
        </div>
      </div>

      <!-- 数据展示方式切换标签 -->
      <el-tabs v-model="activeTab" class="data-tabs" style="margin-bottom: 16px;">
        <el-tab-pane label="折线图" name="chart"></el-tab-pane>
        <el-tab-pane label="表格" name="table"></el-tab-pane>
      </el-tabs>

      <!-- 数据展示区域 -->
      <div class="data-container">
        <!-- ECharts流量图表 -->
        <div class="chart-container" v-if="activeTab === 'chart'">
          <ECharts
              ref="flowChart"
              :option="chartOption"
              class="chart"
              v-loading="chartLoading"
              loading-text="加载每日用水数据中..."
              :events="chartEvents"
          />
          <!-- 无数据提示 -->
          <div class="empty-tip" v-if="!chartLoading && isChartEmpty">
            <el-icon class="empty-icon"><InfoFilled /></el-icon>
            <p class="empty-text">请选择水表并设置日期范围查询每日数据</p>
          </div>
        </div>

        <!-- 表格展示 -->
        <div class="table-container" v-if="activeTab === 'table'">
          <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              loading-text="加载每日数据中..."
              style="width: 100%;"
          >
            <el-table-column
                prop="analyseDate"
                label="日期"
                width="200"
                align="center"
            >
              <template #default="scope">
                {{ formatDateTime(scope.row.analyseDate) }}
              </template>
            </el-table-column>
            <el-table-column
                prop="todayUsage"
                label="当日用水量(吨)"
                align="center"
            />
          </el-table>
          <!-- 表格无数据提示 -->
          <div class="empty-tip" v-if="!tableLoading && tableData.length === 0">
            <el-icon class="empty-icon"><InfoFilled /></el-icon>
            <p class="empty-text">当前日期范围内无每日数据</p>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { ElMessage, ElButtonGroup, ElButton, ElDatePicker, ElTree, ElIcon, ElTabs, ElTabPane, ElTable, ElTableColumn, ElSwitch } from 'element-plus'
// 引入图标
import { Download,LocationFilled, OfficeBuilding, InfoFilled } from '@element-plus/icons-vue'
// 引入ECharts组件
import ECharts from '@/components/ECharts/index.vue'
// 引入API方法
import { listArea } from '@/api/water/area'
import { listElement } from '@/api/water/element'
import { listMeterAnalyse } from '@/api/water/meterAnalyse'  // 改为每日分析数据API
// 时间处理工具 + 路由钩子（核心新增：获取query参数）
import dayjs from 'dayjs'
import { useRoute } from 'vue-router'

// ======================== 核心新增：路由实例与参数处理 ========================
const route = useRoute() // 初始化路由实例，用于获取URL query参数

// ======================== 响应式数据 ========================
// 分页相关配置
const flowChart = ref(null)
const currentPage = ref(1)
const pageSize = ref(50)
const totalData = ref([])  // 存储每日数据集合（字段为todayUsage和analyseDate）

// 树形结构数据
const treeData = ref([])
const treeProps = ref({
  children: 'children',
  label: 'label'
})
const selectedNode = ref(null)
const dateRange = ref([])
// 加载状态
const treeLoading = ref(false)
const chartLoading = ref(false)
const tableLoading = ref(false)

// 标签页切换
const activeTab = ref('chart')

// 表格数据（绑定后端返回的todayUsage和analyseDate字段）
const tableData = ref([])

// 基准线控制相关
const showdayUsageLine = ref(true)  // 基准线显示开关
const dayUsage = ref(null)          // 当前选中水表的基准值

// ECharts事件配置（监听图例点击事件）
const chartEvents = ref({
  // 图例选中状态变化时触发
  legendselectchanged: (params) => {
    // 仅处理“基准用量线”的图例点击
    if (params.name.includes('基准用量线')) {
      // 同步图例选中状态到基准线开关
      showdayUsageLine.value = params.selected[params.name];
    }
  }
});

// 图表配置（适配后端字段）
const chartOption = ref({
  // 新增：图例配置（右上角）
  legend: {
    show: true,
    position: 'top-right', // 右上角定位
    top: '10px',           // 距离顶部10px
    right: '20px',         // 距离右侧20px
    itemWidth: 12,         // 图例图标宽度
    itemHeight: 12,        // 图例图标高度
    textStyle: {           // 图例文字样式
      fontSize: 12,
      color: '#333'
    },
    // 图例数据（初始值，后续动态更新）
    data: [
      {
        name: '基准用量线', // 基准线图例（初始名称）
        icon: 'line',        // 线型图标
        itemStyle: { color: '#f56c6c' } // 与基准线颜色一致
      }
    ],
    // 初始选中状态（与基准线开关同步）
    selected: {
      '基准用量线': showdayUsageLine.value // 基准线初始状态
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    formatter: '{b}<br/>当日用水量: {c} 吨'
  },
  grid: {
    left: '4%',
    right: '0%',
    bottom: '0%',
    top: '5%', // 留出图例空间
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],  // 存储analyseDate
    axisLabel: {
      formatter: (val) => dayjs(val).format('MM-DD'),
      interval: 0,
      show: true,
      rotate: 45,
    }
  },
  yAxis: {
    type: 'value',
    name: '当日用水量 (吨)',
    min: 0,
    splitLine: { show: true, lineStyle: { type: 'dashed' } }
  },
  series: [{
    name: '每日用水',
    type: 'line',
    data: [],  // 存储todayUsage
    smooth: true,
    itemStyle: { color: '#409eff' },
    lineStyle: { width: 2 },
    // 添加基准线配置
    markLine: {
      symbol: ['none', 'none'], // 隐藏线两端标记点
      lineStyle: { color: '#f56c6c', type: 'solid', width: 2, opacity: 0.8 },
      data: [{ yAxis: dayUsage.value }] // 仅保留基准线位置
    }
  }]
})

// 图表无数据标识
const isChartEmpty = computed(() => {
  return chartOption.value.series[0].data.length === 0
})

// ======================== 核心新增：query参数处理逻辑 ========================
/**
 * 递归查找树形结构中的水表节点（根据表名匹配）
 * @param {Array} nodes - 树形节点数组
 * @param {string} targetName - 目标表名（query参数中的elemName）
 * @returns {object|null} 匹配的水表节点
 */
const findMeterNodeByUserName = (nodes, targetName) => {
  for (const node of nodes) {
    // 1. 若是水表节点：匹配表名（兼容“正向表”和“反向表”，如“水表1”和“水表1-反向表”）
    if (node.type === 'meter') {
      const pureName = node.label.includes('-反向表')
          ? node.label.replace('-反向表', '')
          : node.label;
      if (pureName === targetName) {
        return node;
      }
    }
    // 2. 若是区域节点：递归查找子节点
    if (node.type === 'area' && node.children && node.children.length > 0) {
      const foundNode = findMeterNodeByUserName(node.children, targetName);
      if (foundNode) return foundNode;
    }
  }
  return null; // 未找到匹配节点
}

/**
 * 处理URL中的query参数：自动选择水表 + 设置日期范围 + 加载数据
 */
const handleQueryParams = async () => {
  try {
    // 1. 获取query参数（elemName=表名，startTime=开始日期，endTime=结束日期）
    const { elemName, startTime, endTime } = route.query;

    // 2. 验证参数：至少需要表名和完整日期范围
    if (!elemName || !startTime || !endTime) {
      console.log('query参数不完整（需包含elemName、startTime、endTime），跳过自动加载');
      return;
    }

    // 3. 验证日期格式（必须是YYYY-MM-DD）
    if (!dayjs(startTime).isValid() || !dayjs(endTime).isValid()) {
      ElMessage.error('日期格式错误，请使用YYYY-MM-DD格式');
      return;
    }

    // 4. 等待树形数据加载完成（确保treeData有值）
    if (treeData.value.length === 0) {
      ElMessage.info('等待区域与水表数据加载...');
      // 轮询等待树形数据，最多等5秒
      const waitTreeData = new Promise((resolve) => {
        const timer = setInterval(() => {
          if (treeData.value.length > 0) {
            clearInterval(timer);
            resolve();
          }
        }, 300);
        setTimeout(() => {
          clearInterval(timer);
          resolve(); // 超时后强制 resolve，避免卡死
        }, 5000);
      });
      await waitTreeData;
    }

    // 5. 根据表名查找水表节点
    const targetMeterNode = findMeterNodeByUserName(treeData.value, elemName);
    if (!targetMeterNode) {
      ElMessage.error(`未找到表名“${elemName}”对应的水表`);
      return;
    }

    // 6. 自动执行：选择水表 + 设置日期范围 + 加载数据
    selectedNode.value = targetMeterNode;
    dayUsage.value = targetMeterNode.dayUsage !== undefined && targetMeterNode.dayUsage !== null
        ? Number(targetMeterNode.dayUsage)
        : null;
    dateRange.value = [startTime, endTime]; // 设置query中的日期范围
    await fetchDailyData(); // 加载对应数据
    updatedayUsageMarkLine(); // 更新基准线
    ElMessage.success(`已自动加载“${elemName}”(${startTime}至${endTime})的用水数据`);

  } catch (error) {
    ElMessage.error(`处理跳转参数失败：${error.message}`);
    console.error('query参数处理异常：', error);
  }
}

// ======================== 页面初始化（修改：添加参数处理） ========================
onMounted(async () => {
  // 1. 先初始化区域-水表树形数据
  await initAreaMeterTree();
  // 2. 树形数据加载完成后，处理query参数（实现自动跳转加载）
  await handleQueryParams();
  // 3. 若无query参数，默认显示当月数据（保持原有逻辑）
  if (!selectedNode.value) {
    setQuickTime('month');
  }
})

// ======================== 树形结构逻辑 ========================
/**
 * 初始化区域-水表树形数据
 */
const initAreaMeterTree = async () => {
  treeLoading.value = true;
  try {
    // 获取所有区域
    const areaRes = await listArea({ pageNum: 1, pageSize: 1000 });
    if (areaRes.code !== 200) throw new Error('获取区域数据失败');
    // 获取所有水表
    const meterRes = await listElement({ pageNum: 1, pageSize: 1000 });
    if (meterRes.code !== 200) throw new Error('获取水表数据失败');

    // 构建区域树形
    const areaTree = buildAreaTree(areaRes.rows);
    // 分配水表到区域
    const finalTree = assignMetersToArea(areaTree, meterRes.rows);

    treeData.value = finalTree;
  } catch (err) {
    ElMessage.error(err.message || '初始化数据失败');
    console.error('树形数据初始化错误：', err);
  } finally {
    treeLoading.value = false;
  }
}

/**
 * 构建区域树形结构
 */
const buildAreaTree = (areas) => {
  const areaMap = new Map();
  const rootAreas = [];

  areas.forEach(area => {
    areaMap.set(area.id, {
      ...area,
      type: 'area',
      label: area.areaName,
      children: []
    });
  });

  areaMap.forEach(area => {
    const parentId = area.parentAreaId;
    if (!parentId || parentId === 0 || !areaMap.has(parentId)) {
      rootAreas.push(area);
    } else {
      const parentArea = areaMap.get(parentId);
      parentArea.children.push(area);
    }
  });

  return rootAreas;
}

/**
 * 分配水表到对应区域
 */
const assignMetersToArea = (areaTree, meters) => {
  const [meterWithArea, meterWithoutArea] = meters.reduce((acc, meter) => {
    const hasFirstArea = !['', null, undefined].includes(meter.firstAreaId);
    const hasNegativeArea = !['', null, undefined].includes(meter.negativeAreaId);

    if (hasFirstArea || hasNegativeArea) {
      acc[0].push(meter);
    } else {
      acc[1].push(meter);
    }
    return acc;
  }, [[], []]);

  const traverse = (nodes) => {
    nodes.forEach(node => {
      if (node.type === 'area') {
        const matchedMeters = meterWithArea.filter(meter => {
          return meter.firstAreaId === node.id || meter.negativeAreaId === node.id;
        }).map(meter => {
          const isNegativeMeter = meter.negativeAreaId === node.id;
          return {
            ...meter,
            type: 'meter',
            label: isNegativeMeter ? `${meter.elemName}-反向表` : meter.elemName,
            children: null
          };
        });

        node.children = [...node.children, ...matchedMeters];

        if (node.children && node.children.length > 0) {
          traverse(node.children);
        }
      }
    });
  }

  traverse(areaTree);

  if (meterWithoutArea.length > 0) {
    const otherArea = {
      id: 'other_area_placeholder',
      type: 'area',
      label: '其他（无区域的水表）',
      children: meterWithoutArea.map(meter => ({
        ...meter,
        type: 'meter',
        label: meter.elemName,
        children: null
      }))
    };
    areaTree.push(otherArea);
  }

  return areaTree;
}

/**
 * 树形节点选择事件
 */
const handleNodeSelect = (node) => {
  if (node.type === 'meter') {
    selectedNode.value = node;
    // 从选中的水表节点中获取基准值
    dayUsage.value = node.dayUsage !== undefined && node.dayUsage !== null
        ? Number(node.dayUsage)
        : null;
    fetchDailyData();
    // 立即更新基准线
    updatedayUsageMarkLine();
  }
}

// ======================== 时间筛选逻辑 ========================
/**
 * 设置快捷时间范围
 */
const setQuickTime = (type) => {
  let endTime = dayjs().format('YYYY-MM-DD');
  let startTime = '';

  switch (type) {
    case 'today':
      startTime = dayjs().format('YYYY-MM-DD');
      endTime = dayjs().format('YYYY-MM-DD');
      break;
    case 'yesterday':
      startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
      endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
      break;
    case 'week':
      startTime = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
      endTime = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD');
      break;
    case 'month':
      startTime = dayjs().startOf('month').format('YYYY-MM-DD');
      endTime = dayjs().endOf('month').format('YYYY-MM-DD');
      break;
    case 'lastMonth':
      startTime = dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD');
      endTime = dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD');
      break;
  }

  dateRange.value = [startTime, endTime];
  if (selectedNode.value) fetchDailyData();
}

/**
 * 手动选择时间范围触发
 */
const handleDateChange = () => {
  if (selectedNode.value) fetchDailyData();
}

// ======================== 每日数据查询逻辑 ========================
/**
 * 查询水表每日用水数据（适配后端todayUsage和analyseDate字段）
 */
const fetchDailyData = async () => {
  if (!selectedNode.value || !dateRange.value[0] || !dateRange.value[1]) {
    ElMessage.warning('请先选择水表并设置日期范围');
    return;
  }

  chartLoading.value = true;
  tableLoading.value = true;
  currentPage.value = 1;
  totalData.value = [];
  const pageSizeVal = pageSize.value;
  let hasMoreData = true;

  try {
    while (hasMoreData) {
      const params = {
        meterId: selectedNode.value.id,  // 水表ID
        startTime: dateRange.value[0],   // 开始日期
        endTime: dateRange.value[1],     // 结束日期
        pageNum: currentPage.value,      // 分页参数
        pageSize: pageSizeVal
      };

      // 调用每日分析数据API
      const res = await listMeterAnalyse(params);
      if (res.code !== 200 || !Array.isArray(res.rows)) {
        throw new Error(`第${currentPage.value}页每日数据请求失败，请重试`);
      }

      const currentPageData = res.rows;
      totalData.value.push(...currentPageData);

      hasMoreData = currentPageData.length === pageSizeVal;
      currentPage.value++;
    }

    // 按日期排序
    const sortedData = totalData.value.sort((a, b) => {
      return new Date(a.analyseDate) - new Date(b.analyseDate);
    });

    // 更新图表数据（映射analyseDate和todayUsage字段）
    chartOption.value.xAxis.data = sortedData.map(item => item.analyseDate);
    chartOption.value.series[0].data = sortedData.map(item => item.todayUsage);

    // 更新表格数据
    tableData.value = sortedData;

    if (sortedData.length === 0) {
      ElMessage.info('当前日期范围内无每日用水数据');
    }

  } catch (err) {
    ElMessage.error(err.message || '每日用水数据查询失败');
    console.error('分页请求每日数据错误：', err);

  } finally {
    chartLoading.value = false;
    tableLoading.value = false;
    // 数据加载完成后更新基准线
    updatedayUsageMarkLine();
  }
}

/**
 * 格式化日期显示（使用analyseDate字段）
 */
const formatDateTime = (date) => {
  return dayjs(date).format('YYYY-MM-DD');
}

/**
 * 更新基准用量线（markLine）配置 + 动态调整y轴范围 + 同步图例
 */
const updatedayUsageMarkLine = () => {
  if (!chartOption.value || !chartOption.value.series || chartOption.value.series.length === 0) {
    return;
  }

  const targetSeries = chartOption.value.series[0];
  const yAxis = chartOption.value.yAxis;
  const chartData = targetSeries.data;
  const legend = chartOption.value.legend; // 获取图例配置
  const dataMax = chartData.length > 0
      ? Math.max(...chartData.filter(val => val !== null && !isNaN(val)))
      : 0;

  // 图例动态更新
  let baseLineLegendName = '基准用量线'; // 图例默认名称
  let isBaseLineDisabled = false;           // 图例是否禁用

  // 1. 根据基准值更新图例名称和禁用状态
  if (dayUsage.value !== null && !isNaN(dayUsage.value)) {
    // 有基准值：显示“基准用量线：X.XX 吨”
    baseLineLegendName = `基准用量线：${dayUsage.value.toFixed(2)} 吨`;
    isBaseLineDisabled = false;
  } else {
    // 无基准值：显示“基准用量线（无数据）”并禁用
    baseLineLegendName = '基准用量线（无数据）';
    isBaseLineDisabled = true;
  }

  // 2. 更新图例数据中的基准线项
  const baseLineLegendIndex = legend.data.findIndex(item => item.name.includes('基准用量线'));
  if (baseLineLegendIndex !== -1) {
    legend.data[baseLineLegendIndex] = {
      name: baseLineLegendName,
      icon: 'line',
      itemStyle: { color: '#f56c6c' },
      disabled: isBaseLineDisabled // 无基准值时禁用图例
    };
  }

  // 3. 同步图例选中状态（与基准线开关一致，且无基准值时强制未选中）
  legend.selected['基准用量线'] = showdayUsageLine.value && !isBaseLineDisabled;
  legend.selected['每日用水'] = true; // 原有折线始终显示

  // 基准线和y轴逻辑
  if (showdayUsageLine.value && dayUsage.value !== null && !isNaN(dayUsage.value) && dayUsage.value >= 0) {
    const offset = Math.max(dataMax, dayUsage.value) * 0.01 || 0.1;
    yAxis.max = Math.max(dataMax, dayUsage.value) + offset;
    yAxis.min = 0;

    // 更新基准线（无label）
    targetSeries.markLine = {
      symbol: ['none', 'none'],
      lineStyle: { color: '#f56c6c', type: 'solid', width: 2, opacity: 0.8 },
      data: [{ yAxis: dayUsage.value }]
    };
  } else {
    yAxis.max = null;
    yAxis.min = 0;
    targetSeries.markLine = null;
  }

  // 无数据但有基准线时调整y轴
  if (chartData.length === 0 && showdayUsageLine.value && dayUsage.value !== null && !isNaN(dayUsage.value)) {
    yAxis.max = dayUsage.value > 0 ? dayUsage.value : 1;
    yAxis.min = 0;
  }

  // 更新图表
  if (flowChart.value) {
    flowChart.value.setOption(chartOption.value, {
      notMerge: false,
      silent: true
    });
  }
};

// 监听基准线开关和基准值变化 → 实时更新图表
watch([showdayUsageLine, dayUsage], () => {
  updatedayUsageMarkLine();
}, { immediate: true })

// ======================== 树形过滤 ========================
const filterTreeNode = (value, data) => {
  if (!value) return true;
  return data.label.toLowerCase().includes(value.toLowerCase());
}

// <script setup> 中新增导出方法（建议放在“树形过滤”方法之前）
/**
 * 导出每日用水量图表
 */
const handleExportChart = async () => {
  // 1. 前置校验：确保已选水表和日期范围
  if (!selectedNode.value) {
    ElMessage.warning('请先选择水表');
    return;
  }
  if (!dateRange.value[0] || !dateRange.value[1]) {
    ElMessage.warning('请设置日期范围');
    return;
  }

  // 2. 获取ECharts子组件实例（复用已定义的 flowChart ref）
  const chartComponent = flowChart.value;
  if (!chartComponent) {
    ElMessage.error('图表组件未加载，请稍后重试');
    return;
  }

  // 3. 获取ECharts核心实例（依赖子组件暴露的 getEchartsInstance 方法）
  const echartsInstance = chartComponent.getEchartsInstance();
  if (!echartsInstance) {
    ElMessage.error('ECharts实例未初始化，请稍后重试');
    return;
  }

  try {
    // 4. 保存原始图表标题（用于下载后恢复）
    const originalTitle = chartOption.value.title || null;

    // 5. 临时添加图表标题（包含水表名、数据类型、日期范围，便于识别）
    const meterName = selectedNode.value.label;
    const timeRangeText = `${dayjs(dateRange.value[0]).format('YYYY-MM-DD')} 至 ${dayjs(dateRange.value[1]).format('YYYY-MM-DD')}`;
    chartOption.value.title = {
      text: `水表：${meterName} | 每日用水量 | 时间范围：${timeRangeText}`,
      left: 'center',
      textStyle: { fontSize: 14, fontWeight: 'normal' }
    };

    // 6. 触发图表更新，确保标题渲染
    chartComponent.setOption(chartOption.value);

    // 7. 延迟导出（等待标题渲染完成，避免图片缺漏）
    setTimeout(() => {
      // 生成高清PNG图片（pixelRatio:2 保证清晰度，白色背景避免透明底文字模糊）
      const imgBase64 = echartsInstance.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#ffffff'
      });

      // 8. 构建下载链接，触发浏览器下载
      const link = document.createElement('a');
      link.href = imgBase64;
      // 文件名格式：水表名_数据类型_开始日期_结束日期.png（便于归档）
      const fileName = `${meterName}_每日用水量_${dayjs(dateRange.value[0]).format('YYYYMMDD')}_${dayjs(dateRange.value[1]).format('YYYYMMDD')}.png`;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      // 9. 恢复原始标题，避免影响后续图表显示
      chartOption.value.title = originalTitle;
      chartComponent.setOption(chartOption.value);

      ElMessage.success('图表导出成功');
    }, 100);

  } catch (error) {
    ElMessage.error(`导出失败：${error.message}`);
    console.error('每日用水量图表导出错误：', error);
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.water-monitor-layout {
  display: flex;
  height: calc(100vh - 84px);
  overflow: hidden;
}

.aside-panel {
  height: 100%;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
}

.aside-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.header-icon {
  color: #409eff;
  font-size: 18px;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.tree-container {
  height: calc(100% - 84px);
  overflow-y: auto;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  font-size: 14px;
}

.area-icon {
  color: #409eff;
}

.meter-icon {
  color: #67c23a;
}

.main-content {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.time-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.date-picker {
  width: 360px; /* 日期选择器宽度适当减小 */
}

.quick-time-group {
  display: flex;
  gap: 8px;
}

/* 基准线开关样式 */
.dayUsage-line-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* 右对齐，与时间筛选区分开 */
}

.dayUsage-switch {
  --el-switch-on-color: #409eff;
  --el-switch-off-color: #e5e7eb;
}

.dayUsage-tip {
  font-size: 12px;
  color: #909399; /* 浅灰色提示文字 */
}

/* 适配小屏幕：防止开关换行拥挤 */
@media (max-width: 1200px) {
  .time-filter-bar {
    gap: 12px;
  }
  .dayUsage-line-control {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: flex-start;
  }
}

.data-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}

.table-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.empty-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #909399;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
</style>